<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令练习note</title>
</head>
<body>
    <div id="app">
        <!-- template为Vue自定义的，在html节点中不显示的标签，不过在Vue中可用 -->
        <template>
            <h1>计时器</h1>
            <table border="1">
                <tr>
                    <th v-if="count>=isshow01">{{count}}</th>
                    <th v-else>{{errormsg}}</th>
                </tr>
            </table>
            <br />
            <button @click="increasecount">增加</button>
            <!-- v-on:click可以处理两个函数吗 -->
            <button v-on:click="reducecount">减少</button>
            <hr />

            <h3 v-show="isshow">{{vshowmsg}}</h3>
            <button v-on:click="isshow=!isshow">显示/隐藏</button>

            <hr />
            <p v-text="vtextmsg"></p>

            <hr />
            <p v-html="vhtmlmsg"></p>

            <hr />

            <a v-bind:href="goalurl" v-text="goalwebname"></a>
            <hr />



        </template>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data: function(){
                return{
                    count:0,
                    

                    // v-bind
                    goalurl:"https://baidu.com",
                    goalwebname:"百度一下",

                    //v-show
                    isshow:true,
                    vshowmsg:"hello, v-text success!",

                    //v-if v-else-if v-else
                    isshow01:0,
                    errormsg:"计时数不能够小于0",

                    // v-text
                    vtextmsg:"hello, v-text success!",

                    // v-html
                    vhtmlmsg:"<h1>hello, v-html success!</h1>"
                }
            },
            methods:{
                increasecount:function(){
                    this.count++
                },
                reducecount:function(){
                    if(this.count>=0){
                        this.count--
                    }
                    else{
                        count = 0
                    }
                    
                }
            }
        })
    </script>
</body>
</html>